<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同望智能小助手</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/brain.png') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
            crossorigin="anonymous"></script>
    <style>
        tbody tr td:first-child {
            color: dodgerblue;
            width: 300px;
        }
    </style>
</head>
<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">角色</th>
        <th scope="col">内容</th>
    </tr>
    </thead>
    <tbody id="msglist">
    </tbody>
</table>
<div class="input-group mb-3" style="position: fixed ;bottom: 0px;">
    <input id="query" type="text" class="form-control" placeholder="提问" aria-label="提问"
           aria-describedby="button-addon2">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
    </div>
</div>
<script>
    var roleConf = {
        'user': {
            'name': '用户'
        },
        'assistant': {
            'name': 'AI'
        }
    }
    var username = 'a1'
    var msglist = []
    $(document).ready(function () {
        $("#button-addon2").click(function () {
            var msg = $("#query").val()
            addAndFreshMsg({
                role: 'user',
                content: msg
            })
            $("#query").val('')
            $.ajax({
                // {#url: 'http://127.0.0.1:5000/chatbak', // 后台接口的URL#}
                url: '/chatbak', // 后台接口的URL
                type: 'GET', // 请求类型为GET
                data: {
                    un: username,
                    query: msg,
                    scene: 'mix'
                },
                success: function (response) {
                    console.log(response);
                    if (response.code == 200) {
                        addAndFreshMsg(response.data.answer)
                        refresh()
                    }
                },
                error: function (error) {
                    console.error(error);
                }
            });
        })

        function addAndFreshMsg(message) {
            msglist.push(message)
            var rows = ''
            msglist.forEach(function (message) {
                // {#let mdCnt = message.content#}
                // let mdCnt = marked.parse(message.content)
                let mdCnt = marked.parse(message.content)
                let tbrow = `
                <tr>
                    <td>${roleConf[message.role].name}</td>
                    <td style="white-space: pre-wrap;">${mdCnt}</td>
                </tr>
                `
                rows += tbrow
            })
            $("#msglist").html(rows)

        }
    });
</script>
</body>
</html>